<template>
     <el-form ref="form" label-width="70px" :inline="true" class="login-container" :model="form" :rules="rules">
       <h3 class="login_title">系统登录</h3>
       <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
       </el-form-item>
       <el-form-item  label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
       </el-form-item>
       <el-form-item>
          <el-button @click="submit" style="margin-left:100px" type="primary">登录</el-button>
       </el-form-item>
     </el-form>
</template>

<script>
import Mock from 'mockjs'
import Cookie from 'js-cookie'
import { getMenu } from '@/api'
export default {
  data(){
    return{
       form:{
         username:'',
         password:''
       },
       rules:{
        username:[
          {required:true,trigger:'blur',message:'请输入用户名'}
        ],
        password:[
        {required:true,trigger:'blur',message:'请输入密码'}
        ]
       }
    }
  },
  methods:{
    submit(){
       //token信息
      // const token = Mock.Random.guid()
       //token信息存入cookie用于不同页面的通信
     //  Cookie.set('token',token)
      // this.$router.push('/home')
      this.$refs.form.validate((vali)=>{
        console.log('@@',this.form)
         if(vali){
             getMenu(this.form).then(({data})=>{
              if(data.code === 20000){
              Cookie.set('token',data.data.token)

             this.$store.commit('setMenu',data.data.menu)
            this.$store.commit('addMenu',this.$router) 
             this.$router.push('/home')
             }else{
              this.$message.error(data.data.message)
             }
          }).catch((error)=>{
            console.log(error)
          })
         }
      })
      
    
    }
  }
}
</script>

<style lang="less" scoped>
  .login-container {
    width: 350px;
    border: 1px solid #eaeaea;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 25px #cac6c6;
    box-sizing: border-box;
    .login_title {
        text-align: center;
        margin-bottom: 40px;
        color: #505458;
    }
    .el-input {
        width: 198px;
    }
}
</style>